<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<title>Vue 组件注册 Prop </title>
</head>
<body>
	<div id="app1">
	
		<!-- 传递静态Prop -->
            <!--<blog-post title="静态"></blog-post>-->
            
            <!-- 动态赋予一个变量的值 -->
            <blog-post v-for = "post in posts"
            v-bind:title = 'post.title'
            ></blog-post>
            
            <!-- 动态赋予一个复杂表达式的值 -->
            <!--<blog-post v-for = "post in posts"
            v-bind:title = "post.author.name + '喜欢' + post.likes"
            ></blog-post>-->
            
            <!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
            <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
            <!--<blog-post v-bind:title="42"></blog-post>-->
            
            <!-- 传入一个布尔值 -->
            <!--<blog-post v-bind:is-published="false"></blog-post>-->
            
            <!-- 传入一个数组 -->
            <!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
            <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
           <!--  <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post> -->
            
            <!-- 传入一个对象 -->
           <!--  <blog-post v-bind:author="{name:'tom', sex:'男'}"></blog-post> -->
            
            <!-- 传入一个对象的所有属性 -->
            <!-- <blog-post v-bind="post"></blog-post> -->

		
	</div>
	
</body>
</html>
<script type="text/javascript">
	Vue.component('blog-post', {
        // props类型检查
        props:  {
            title: String,
            likes: Number,
            isPublished: Boolean,
            commentIds: Array,
            author: Object,
            callback: Function,
            contactsPromise: Promise
            },
		template: '<h3>{{ title }} {{ likes }} {{ isPublished }}{{ commentIds }} {{ author }}'+'</h3>'
    })
               

	var app1=new Vue({
		el:'#app1',
		data: {
        	posts:[
                {
                title: '破冰行动',
                likes: '喝茶',
                isPublished: true,
                commentIds: ['北山养鸡场','丰益宾馆','东山'],
                author: {name: '林耀东', sex: '男'}
                }
            ],
            post:{
                title: '破冰行动',
                likes: 100,
                isPublished: true,
                commentIds: ['北山养鸡场','丰益宾馆','东山'],
                author: {name: '林耀东', sex: '男'}
            }
		}
	})
</script>